<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: Sunny Chen
 * @Date: 2024-07-28 21:54:07
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-07-29 09:22:17
-->
<template>
  <div id="home">
    <Header />
    <div class="router-wrapper">
      <router-view></router-view>
    </div>
    <Footer />
    <Toolbar />
    <ControlView />
    <Panel
      v-for="panel in panels"
      :top="panel.top"
      :leftOrRight="panel.leftOrRight"
      :title="panel.title"
      :currentComponent="getComponent(panel.item)"
      v-if="panelShow"
    >
    </Panel>
    <!-- <SiteManageView v-if="!panelShow"></SiteManageView> -->
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref, watch } from 'vue'
import Header from '@/components/UI/Header.vue'
import Footer from '@/components/UI/Footer.vue'
import Panel from '@/components/panel/Panel.vue'
import Toolbar from '@/components/UI/Toolbar.vue'
import ControlView from '@/components/UI/ControlView.vue'

import SiteManageView from './SiteManageView.vue'
import { useLineData } from '@/store'
const panels = [
  { item: `RunStatistics`, title: '运营统计', top: 115, leftOrRight: 'left' },
  {
    item: `SubwayActivities`,
    title: '地铁活动',
    top: 415,
    leftOrRight: 'left',
  },
  { item: `PassengerFlow`, title: '客流指标', top: 715, leftOrRight: 'left' },
  { item: `RodaOverview`, title: '线路概览', top: 115, leftOrRight: 'right' },
  { item: `AlarmTrend`, title: '趋势警告', top: 415, leftOrRight: 'right' },
  {
    item: `SurveillanceVideo`,
    title: '监控视频',
    top: 715,
    leftOrRight: 'right',
  },
]
const getComponent = (name) => {
  const component = defineAsyncComponent(() =>
    import(`@/components/panel/${name}.vue`)
  )
  return component
}
const lineDataStore = useLineData()
const panelShow = ref(true)
watch(
  () => lineDataStore.sidebarShow,
  (val) => {
    panelShow.value = lineDataStore.sidebarShow
  }
)
</script>

<style scoped>
#home {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.router-wrapper {
  position: absolute;
  bottom: 10vh;
  width: 100%;
  /* 注意calc计算符号要保留空格 */
  height: calc(100% - 10vh);
  z-index: 100;
}
</style>
